<template>
    <div class="body-inner">
        <h1 class="body-title">
            <i :class="$bodyTitle.icon"></i>
            <span>{{ $bodyTitle.description }}</span>
        </h1>
        <div class="line10"></div>
        <div class="body-main">
            <div class="unicode">
                <div class="message">
                    <div class="btns">
                        <div class="btn" :class="{active:type==='Unicode'}" @click="setType('Unicode')">
                            <div class="title">Unicode</div>
                            <i class="icon appfont app-check"></i>
                        </div>
                        <div class="btn" :class="{active:type==='URI'}" @click="setType('URI')">
                            <div class="title">URI</div>
                            <i class="icon appfont app-check"></i>
                        </div>
                        <div class="btn" :class="{active:type==='URICompoent'}" @click="setType('URICompoent')">
                            <div class="title">URICompoent</div>
                            <i class="icon appfont app-check"></i>
                        </div>
                    </div>
                    <div class="unicoeTypes" v-if="type==='Unicode'">
                        <button type="button" :class="{active:unicodeType === 1}" @click="setUnicodeType(1)">
                            <div class="title">%u 模式</div>
                        </button>
                        <button type="button" :class="{active:unicodeType === 2}" @click="setUnicodeType(2)">
                            <div class="title">\u 模式</div>
                        </button>
                    </div>
                    <textarea v-model="message" @input="convert" placeholder="输入原文"></textarea>
                    <tips v-if="message" class="tips" :tip="`点击复制`" :direction="'top'">
                        <i @click="$copy(message)" class="copy appfont app-copy"></i>
                    </tips>
                </div>
                <div class="results">
                    <textarea v-model="result" @input="restore" placeholder="转换结果"></textarea>
                    <tips v-if="result" class="tips" :tip="`点击复制`" :direction="'top'">
                        <i @click="$copy(result)" class="copy appfont app-copy"></i>
                    </tips>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'kit_unicode',
    data () {
        return {
            type       : 'Unicode',
            unicodeType: 1,
            message    : '',
            result     : ''
        };
    },
    methods: {
        /*设置转换类型*/
        setType (type) {
            this.type = type;
            this.convert();
        },

        /*设置Unicode转换模式*/
        setUnicodeType (type) {
            this.unicodeType = type;
            this.convert();
        },

        /*转换*/
        convert () {
            this.result = '';

            switch (this.type) {
                case 'Unicode':
                    this.result = escape(this.message);
                    if (this.unicodeType === 1) {
                        this.result = this.result.replace(/\\u/g, '%u');
                    }
                    else if (this.unicodeType === 2) {
                        this.result = this.result.replace(/\%u/g, '\\u');
                    }
                    break;

                case 'URI':
                    this.result = encodeURI(this.message);
                    break;

                case 'URICompoent':
                    this.result = encodeURIComponent(this.message);
                    break;
            }
        },

        /*还原*/
        restore () {
            this.message = '';

            switch (this.type) {
                case 'Unicode':
                    this.result  = this.result.replace(/\\u/g, '%u');
                    this.message = unescape(this.result);
                    break;

                case 'URI':
                    this.message = decodeURI(this.result);
                    break;

                case 'URICompoent':
                    this.message = decodeURIComponent(this.result);
                    break;
            }
        }
    }
};
</script>

<style scoped lang="less">
.unicode {
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : calc(~"100vh - 125px");

    .btns {
        display       : flex;
        margin-bottom : 10px;

        .btn {
            height                : 40px;
            background            : rgba(255, 255, 255, 0.1);
            flex                  : auto;
            margin-right          : 10px;
            -webkit-border-radius : 5px;
            -moz-border-radius    : 5px;
            border-radius         : 5px;
            display               : flex;
            align-items           : center;
            cursor                : pointer;

            &.active {
                background : fade(@green, 20%);

                .icon {
                    color : @green;
                }
            }

            &:last-child {
                margin-right : 0;
            }

            .icon {
                height          : 40px;
                width           : 40px;
                display         : flex;
                align-items     : center;
                justify-content : center;
                flex-grow       : 0;
                flex-shrink     : 0;
                color           : #888;
            }

            .title {
                flex-grow   : 1;
                flex-shrink : 1;
                margin-left : 20px;
            }
        }
    }

    .message {
        flex         : 1;
        margin-right : 20px;
        height       : 100%;
        position     : relative;

        .tips {
            cursor      : pointer;
            position    : absolute;
            top         : 50px;
            right       : 10px;
            z-index     : 100;
            height      : 45px;
            width       : 35px;
            padding-top : 10px;

            .copy {
                height                : 100%;
                width                 : 100%;
                display               : flex;
                align-items           : center;
                justify-content       : center;
                color                 : #fff;
                cursor                : pointer;
                background            : rgba(180, 180, 180, 0.8);
                -webkit-border-radius : 5px;
                -moz-border-radius    : 5px;
                border-radius         : 5px;

                &:hover {
                    background : fade(@blue, 90%);
                    color      : #fff;
                }
            }
        }

        textarea {
            position              : relative;
            z-index               : 1;
            width                 : 100%;
            height                : calc(~"100vh - 125px - 50px");
            border                : 0;
            -webkit-border-radius : 5px;
            -moz-border-radius    : 5px;
            border-radius         : 5px;
            padding               : 15px;
            font-size             : 16px;
            border                : 0;
        }

        .unicoeTypes {
            position        : absolute;
            z-index         : 100;
            bottom          : 10px;
            right           : 0;
            display         : flex;
            align-items     : center;
            justify-content : flex-end;

            button {
                border                : 0;
                margin-top            : 10px;
                margin-right          : 5px;
                height                : 30px;
                display               : flex;
                align-items           : center;
                justify-content       : center;
                color                 : #fff;
                cursor                : pointer;
                background            : rgba(100, 100, 100, 0.9);
                -webkit-border-radius : 5px;
                -moz-border-radius    : 5px;
                border-radius         : 5px;
                display               : flex;
                padding-left          : 15px;
                padding-right         : 15px;

                .title {
                }

                &:last-child {
                    margin-right : 10px;
                }

                &.active {
                    color      : #fff;
                    background : fade(@green-dark, 90%);
                }
            }
        }
    }

    .results {
        height         : 100%;
        flex           : 1;
        display        : flex;
        flex-direction : column;
        position       : relative;

        .tips {
            width       : 100%;
            height      : 100%;
            cursor      : pointer;
            position    : absolute;
            top         : 0;
            right       : 10px;
            z-index     : 100;
            height      : 45px;
            width       : 35px;
            padding-top : 10px;

            .copy {
                height                : 100%;
                width                 : 100%;
                display               : flex;
                align-items           : center;
                justify-content       : center;
                color                 : #fff;
                cursor                : pointer;
                background            : rgba(180, 180, 180, 0.8);
                -webkit-border-radius : 5px;
                -moz-border-radius    : 5px;
                border-radius         : 5px;

                &:hover {
                    background : fade(@blue, 90%);
                    color      : #fff;
                }
            }
        }

        textarea {
            background            : #fff;
            border                : 0;
            -webkit-border-radius : 5px;
            -moz-border-radius    : 5px;
            border-radius         : 5px;
            width                 : 100%;
            height                : 100%;
            padding               : 15px;
            overflow-x            : hidden;
        }
    }
}
</style>
